<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p><!--演示如何在 HTML 文档中创建表格-->
每个表格从一个 table 标签开始。 
每个表格行从 tr 标]签开始。
每个表格的数据从 td 标签开始。
</p>

<h4>一列:</h4>
<table border="1"><!--定义表格-->
<tr><!--定义表格的行-->
  <td>100</td><!--定义表格单元-->
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<br>
<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

<br><!--表格的表头使用 <th> 标签进行定义-->
  <table border="1">
    <tr>
      <th>Header 1</th><!--定义表格的表头-->
      <th>Header 2</th>
    </tr>
    <tr>
      <td>row 1,cell 1</td>
      <td>row 1,cell 2</td>
    </tr>
    <tr>
      <td>row 2,cell 1</td>
      <td>row 2,cell 2</td>
    </tr>
  </table>

<br><!--演示一个没有边框的表格-->
<h4>这个表格没有边框：</h4>
<table>
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
  </tr>
</table>
<h4>这个表格没有边框：</h4>
<table border="0">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
  </tr>
</table>

<br><!--演示如何显示表格表头-->
<h4>水平标题：</h4>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Telephone</th>
    <th>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>
<h4>垂直标题：</h4>
<table border="1">
  <tr>
    <th>First Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th>Telephone</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <th>Telephone</th>
    <td>555 77 855</td>
  </tr>
</table>

<br><!--演示一个带标题 (caption) 的表格-->
<table border="1">
  <caption>Monthly savings</caption><!--定义表格标题-->
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

<br><!--演示如何定义跨行或跨列的表格单元格-->
<h4>单元格跨两列：</h4>
<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th><!--合并列属性-->
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>
<h4>单元格跨两行：</h4>
<table border="1">
  <tr>
    <th>First Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th><!--合并行属性-->
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>

<br><!--演示如何在不同的元素内显示元素-->
<table border="1">
  <tr>
    <td>
      <p>这是一个段落</p>
      <p>这是另一个段落</p>
    </td>
    <td>这是单元格包含一个表格：
      <table border="1">
        <tr>
          <td>A</td>
          <td>B</td>
        </tr>
        <tr>
          <td>C</td>
          <td>D</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>这个单元格包含一个列表
      <ul><!--定义无序列表-->
        <li>apples</li><!--定义列表项-->
        <li>bananas</li>
        <li>pineapples</li>
      </ul>
    </td>
    <td>HELLO</td>
  </tr>
</table>

<br><!--演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白-->
<h4>没有单元格边距：</h4>
<table border="1">
  <tr>
    <td>First</td>
    <td>Row</td>
  </tr>
  <tr>
    <td>Second</td>
    <td>Row</td>
  </tr>
</table>
<h4>有单元格边距：</h4>
<table border="1" cellpadding="10"><!--单元格边距属性-->
  <tr>
    <td>First</td>
    <td>Row</td>
  </tr>
  <tr>
    <td>Second</td>
    <td>Row</td>
  </tr>
</table>

<br><!--演示如何使用 Cell spacing 增加单元格之间的距离-->
<h4>没有单元格间距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0"><!--单元格间距属性-->
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10"><!--单元格间距属性-->
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>


